<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 50px;
        }
        h1{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #000;
            background: lightcoral;
            box-sizing: border-box;
            font-size: 20px;
            font-weight: lighter;
        }
        ul{
            width: 100px;
            height: 0;
            background: burlywood;
            overflow: hidden;

        }
        ul li {
            list-style: none;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        ul li:hover{
            background: lightsalmon;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1>体育</h1>
        <ul>
            <li>体育1</li>
            <li>体育2</li>
            <li>体育3</li>
            <li>体育2</li>
            <li>体育3</li>
        </ul>
        <h1>新闻</h1>
        <ul>
            <li>新闻1</li>
            <li>新闻2</li>
            <li>新闻3</li>
        </ul>
        <h1>科技</h1>
        <ul>
            <li>科技1</li>
            <li>科技2</li>
            <li>科技3</li>
        </ul>
    </div>
</body>
<script src="./common.js"></script>
<script>
    /*
        手风琴:
            * 点击某个h1，就让对应的ul显示(改变高度)
    */
    var box = document.getElementById('box');
    var btns = box.getElementsByTagName('h1');//集合
    var menus = box.getElementsByTagName('ul');//集合

    //1.对h1绑定事件
    for(var i = 0; i < btns.length; i++) {
        //每一个按钮身上都有一个开关
        btns[i].isok = true;
        btns[i].onclick = function() {
            // console.log(this.nextElementSibling);//找到当前点击对象的，下一个兄弟节点
            var now = this.nextElementSibling;
            //ul的原始高度：孩子节点总个数*某个孩子节点的高度
            var iHeight = this.nextElementSibling.children.length * this.nextElementSibling.children[0].offsetHeight;
            // console.log(iHeight);
            // startMove(now, { 'height' : iHeight});
            if(this.isok) {
                //第一次：展开
                startMove(now, { 'height' : iHeight});
            }else{
                startMove(now, { 'height' : 0});
            }

            this.isok = !this.isok;//开关。
        }
    }
</script>
</html>